<template>
  <ta-layout-sider
    breakpoint="lg"
    collapsedWidth="0"
  >
    <div class="logo">logo</div>
    <ta-menu
      theme="dark"
      mode="inline"
      :style="{ lineHeight: '6.1rem', borderBottom: 'none' }"
      :defaultSelectedKeys="['0']"
    >
      <ta-menu-item 
        class="menu-list" 
        v-for="(item, index) in menuList"
        :key="index"
        @click="changeRouter(item.pathURL)"
      >
        <router-link :to="item.pathURL">
          <ta-icon :type="item.iconType" />
          <span class="nav-text">{{item.name}}</span>
        </router-link>
      </ta-menu-item>
    </ta-menu>
  </ta-layout-sider>
</template>

<script>
export default {
  name: "Header",
  data () {
    return {
      menuList: []
    }
  },
  created () {
    let routeData = this.$router.options.routes[0].children
    routeData.forEach(item => {
      let menu = {
        name: item.title,
        pathURL: item.path,
        iconType: item.type
      }
      this.menuList.push(menu)
    });
  },
  methods: {
    changeRouter (url) {
      console.log(url)
      console.log(this.$router.path)
    }
  }
}
</script>

<style scoped>
  .header {
    height: 6.25rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e8e8e8;
  }
  .logo {
    width: 10rem;
    height: 4rem;
    text-align: center;
    background: rgba(98, 90, 129,.4);
    margin: 2rem 1rem;
  }
  .menu-list {
    font-size: 1.25rem;
  }
</style>